<template>
	<div>
		<!-- 行内 -->
		<div v-my-directive :data-title="title" data-description="学习技能、解决问题学习技能、解决问题学习技能、解决问题学习技能、解决问题学习技能、解决问题" class="coursenav">
			<div class="Genericpadding content">
				<div class="Horizontalspacing minixgap">
					<p>[</p> <p style="color: #f56c6c; font-weight: bold">{{ keyword }}</p
					><p>]</p></div
				>
				<div class="Horizontalspacing minixgap"
					><p>共搜索到</p><p style="font-weight: bold"> {{ total }} </p><p>条「</p><p style="font-weight: bold">{{ keyword }}</p
					><p> 」的相关内容。</p>
				</div>
			</div>
		</div>
		<!-- 列表 -->
		<div v-loading.fullscreen.lock="loading" class="coursenav">
			<div v-if="arclist.length == 0" class="dispaygrid">
				<el-empty :image-size="200" />
			</div>
			<el-row v-else :gutter="20">
				<el-col class="my-custom-class" :span="6" v-for="(item, index) in arclist" :key="index">
					<el-card :body-style="{ padding: '0px' }">
						<router-link :to="'/' + type + '/' + item.alias + '/' + item.id">
							<el-image class="demo-image__error" :src="item.thumbnail ? item.thumbnail : ''">
								<template #error>
									<div class="image-slot">
										<el-icon><Picture /></el-icon>
									</div>
								</template>
								<template #placeholder>
									<div class="image-slot">
										<el-icon><Loading /></el-icon>
									</div>
								</template>
							</el-image>
						</router-link>
						<div style="padding: 14px" class="minfont ThinLineLayout minaxgap">
							<div class="Horizontalspacing minxgap">
								<el-tag effect="plain" size="small">{{ item.pidname }}</el-tag>
								<el-tooltip class="box-item" effect="light" :content="item.title" placement="top-start">
									<router-link :to="'/' + type + '/' + item.alias + '/' + item.id"
										><div class="coreqzsolld truncate-text">{{ item.title }}</div></router-link
									>
								</el-tooltip>
							</div>
							<div class="Horizontalspacing space-around">
								<div class="Horizontalspacing minxgap">
									<el-avatar class="center" :src="item.user.Avatar" :size="20">
										<el-icon>
											<Edit />
										</el-icon>
									</el-avatar>
									<router-link :to="'/homepage/' + item.user.id"></router-link>
									<div class="minfont grey center coreqzsolld truncate-texts">{{ item.user.nickname ? item.user.nickname : item.user.username }}</div>
								</div>
								<div>{{ item.Creationtime }}</div>
							</div>
						</div>
					</el-card>
				</el-col>
			</el-row>
			<div class="dispaygrid">
				<el-pagination background class="center" :hide-on-single-page="value" @current-change="page" :current-page="curPage" :page-size="pagesize" layout="prev, pager, next" :total="total"> </el-pagination>
			</div>
		</div>
	</div>
</template>
<script>
	import router from '../router' // 导入Vue Router
	import left from './../components/left'
	import { dataRequest as api } from '@/api/api'
	export default {
		name: 'name',
		components: {
			// 组件
			left,
		},

		data() {
			return {
				title: '所有课程',
				type: this.$route.params.type,
				keyword: this.$route.params.keyword,
				arclist: [],
				loading: true,

				//返回值
				value: true,
				pagesize: 20, //每页显示数量
				curPage: 1, // 当前页数
				total: 0, // 一共几条数据
				offset: 'DESC',
				// 默认按照时间
				tosort: 'time',
			}
		},

		methods: {
			// 获取数据
			async get() {
				this.loading = true
				console.log(this.type, this.keyword)
				let array = await api(['search', { perPage: this.pagesize, page: this.curPage, offset: this.offset, tosort: this.tosort, type: this.type, keyword: this.keyword }])
				console.log(array)
				if (array.code == 200) {
					this.arclist = array.data
					this.total = array.massage / 1
				} else {
					this.arclist = []
					this.total = 0
				}
				this.loading = false
				window.scrollTo({ behavior: 'instant', top: 0 })
			},

			// 分页
			async page(ele = 1) {
				this.curPage = ele
				this.get()
			},
			// 浏览量
			PageView(ele) {
				api(['corebrowsing', ele])
			},
		},
		watch: {
			'$route.params.type': function (newVal, oldVal) {
				;(this.type = this.$route.params.type), (this.curPage = 1)
				this.get()
			},
			'$route.params.keyword': function (newVal, oldVal) {
				;(this.keyword = this.$route.params.keyword), (this.curPage = 1)
				this.get()
			},
		},

		mounted() {
			// 生命周期:
			this.get()
		},
		updated() {
			// this.loading = false
		},
	}
</script>
<style scoped>
	.coursenav {
		width: 1200px;
		padding-top: 20px;
		margin: auto;
	}
	.my-custom-class {
		margin-bottom: 20px; /* 设置行间距为 20 像素 */
	}
	.el-image {
		width: 283px;
		height: 283px;
	}
	.demo-image__error .el-image {
		padding: 0 5px;
		width: 100%;
		height: 100%;
	}

	.demo-image__error .image-slot {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		background: var(--el-fill-color-light);
		color: var(--el-text-color-secondary);
		font-size: 30px;
	}
	.demo-image__error .image-slot .el-icon {
		font-size: 30px;
	}
	.courepage {
		margin: auto;
	}
	.coreqzsolld:hover {
		color: var(--primary-color);
	}
	.saleperiodabc {
		position: absolute;
		display: grid;
		font-size: 16px;
		top: 0px;
		height: 24px;
		width: 65px;
		border-bottom-right-radius: 4px;
		background: #f56c6c; /* 使用 rgba 表示法，最后一个值 0.5 表示透明度，取值范围为 0 到 1 */
		z-index: 100;
	}
	.saleperiodabc span {
		font-weight: 550;
		font-size: 10px;
		color: rgb(255, 255, 255);
	}
	.atop {
		height: 0px !important;
		font-size: 0px;
	}
	.coreplice {
		font-weight: bold;
		font-size: 12px;
		color: #ff485e !important;
	}
	.minfont {
		font-size: 12px;
	}
	.truncate-text {
		width: 187px !important;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-text-overflow: ellipsis; /* Webkit浏览器前缀 */
	}
	.truncate-texts {
		width: 50px !important;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-text-overflow: ellipsis; /* Webkit浏览器前缀 */
	}
</style>
<style>
	.custom-font-size .el-statistic__content {
		width: 100%;
		font-weight: inherit; /* 清除字体粗细 */
		font-size: inherit; /* 清除字体大小 */
		color: inherit;
	}
	.coreplice .el-text {
		font-weight: 400 !important;
		font-size: 12px;
	}
</style>
<!-- 传递类型  内容 -->
<!-- 后端处理按照类型判断查询哪个表  和条件 -->
<!-- 数据库查询 按照或即可 -->
